<div ba-panel ba-panel-class="with-scroll notification-panel">
  <div class="row">
    <div class="col-md-3 col-sm-4">
      <div class="control">
        <label for="title">Title</label>
        <input ng-model="options.title" type="text" class="form-control" id="title" placeholder="Enter a title ...">
      </div>
      <div class="control">
        <label for="message">Message</label>
        <textarea ng-model="options.msg" class="form-control" id="message" rows="3"
                  placeholder="Enter a message ..."></textarea>
      </div>
      <div class="control-group">
        <div class="control">
          <label class="checkbox-inline custom-checkbox nowrap">
            <input ng-model="options.closeButton" type="checkbox" id="closeButton">
            <span>Close Button</span>
          </label>
        </div>
        <div class="control">
          <label class="checkbox-inline custom-checkbox nowrap">
            <input ng-model="options.allowHtml" type="checkbox" id="html">
            <span>Allow html</span>
          </label>
        </div>
        <div class="control">
          <label class="checkbox-inline custom-checkbox nowrap">
            <input ng-model="options.progressBar" type="checkbox" id="progressBar">
            <span>Progress bar</span>
          </label>
        </div>
        <div class="control">
          <label class="checkbox-inline custom-checkbox nowrap">
            <input ng-model="options.preventDuplicates" type="checkbox" id="preventDuplicates">
            <span>Prevent duplicates</span>
          </label>
        </div>
        <div class="control">
          <label class="checkbox-inline custom-checkbox nowrap">
            <input ng-model="options.preventOpenDuplicates" type="checkbox" id="preventOpenDuplicates">
            <span>Prevent open duplicates</span>
          </label>
        </div>
        <div class="control">
          <label class="checkbox-inline custom-checkbox nowrap">
            <input ng-model="options.tapToDismiss" type="checkbox" id="tapToDismiss">
            <span>Tap to dismiss</span>
          </label>
        </div>
        <div class="control">
          <label class="checkbox-inline custom-checkbox nowrap">
            <input ng-model="options.newestOnTop" type="checkbox" id="newestOnTop">
            <span>Newest on top</span>
          </label>
        </div>
      </div>
    </div>
    <div class="col-md-2 col-sm-3 toastr-radio-setup">
      <div id="toastTypeGroup">
        <div class="controls radio-controls">
          <label class="radio-header">Toast Type</label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.type" name="toasts" value="success"/><span>Success</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.type" name="toasts" value="info"/><span>Info</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.type" name="toasts" value="warning"/><span>Warning</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.type" name="toasts" value="error"/><span>Error</span>
          </label>
        </div>
      </div>
      <div id="positionGroup">
        <div class="controls radio-controls">
          <label class="radio-header position-header">Position</label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-top-right"/>
            <span>Top Right</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-bottom-right"/>
            <span>Bottom Right</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-bottom-left"/>
            <span>Bottom Left</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-top-left"/>
            <span>Top Left</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-top-full-width"/>
            <span>Top Full Width</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-bottom-full-width"/>
            <span>Bottom Full Width</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-top-center"/>
            <span>Top Center</span>
          </label>
          <label class="radio custom-radio">
            <input type="radio" ng-model="options.positionClass" name="positions" value="toast-bottom-center"/>
            <span>Bottom Center</span>
          </label>
        </div>
      </div>
    </div>
    <div class="col-md-2 col-sm-3">
      <div class="control">
        <label for="timeOut">Time out</label>
        <input type="text" class="form-control" id="timeOut" ng-model="options.timeOut" placeholder="ms">
        <label class="sub-label" for="timeOut">If you set it to 0, it will stick</label>
      </div>
      <div class="control">
        <label for="extendedTimeOut">Extended time out</label>
        <input type="text" class="form-control" id="extendedTimeOut" ng-model="options.extendedTimeOut"
               placeholder="ms">
      </div>
      <div class="control">
        <label for="maxOpened">Maximum number of toasts</label>
        <input type="text" class="form-control" id="maxOpened" ng-model="options.maxOpened" value="0">
        <label for="maxOpened" class="sub-label">0 means no limit</label>
      </div>
      <div class="control">
        <label class="checkbox-inline custom-checkbox nowrap">
          <input ng-model="options.autoDismiss" type="checkbox" id="autoDismiss">
          <span>Auto dismiss</span>
        </label>
      </div>
    </div>
    <div class="col-md-5 col-sm-12">
      <label>Result:</label>
      <pre class="result-toastr" id='toastrOptions'>{{optionsStr}}</pre>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 button-row">
      <button ng-click="openToast()" class="btn btn-primary">Open Toast</button>
      <button ng-click="openRandomToast()" class="btn btn-primary">Random Toast</button>
      <button ng-click="clearToasts()" class="btn btn-danger">Clear Toasts</button>
      <button ng-click="clearLastToast()" class="btn btn-danger">Clear Last Toast</button>
    </div>
  </div>

</div>
